<template>
  <div>
    <div id='main' style="width:500px;height:500px"></div>


  </div>
</template>

<script>
import * as echarts from 'echarts';

import {reactive} from 'vue'
export default {
  setup() {
    let data1 = reactive({'data':[]})
    let data2 = reactive({'data':[]})

    let initEarcharts=()=>{
      let chartDom = document.getElementById('main');
      let myChart = echarts.init(chartDom);
      let option;
      option = {
        xAxis: {
          type: 'category',
          data: data1.data
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data2.data,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };

      option && myChart.setOption(option);
    }

    //初始化websocket
    let initWebsocket=()=>{
      let id = 'scorechange2'
      let ws = new WebSocket("ws://localhost:8000/web_conn/"+id)
      ws.onopen=function(){
        console.log('建立connection')
      }
      ws.onmessage=function(mes){
        let data = JSON.parse(mes.data)
        data1.data = data[1]
        data2.data = data[0]
        initEarcharts()
      }
      ws.close=function(){
        console.log('关闭')
      }
    }


    return{
      data1,
      data2,
      initEarcharts,
      initWebsocket,
    }
    //更新echarts数据
  },
  name: "userscore",
  data() {
    return {

    }
  },
  methods: {},
  mounted() {
    this.initWebsocket()
  }
}
</script>

<style scoped>

</style>